/** @charset 'utf-8'; **/
/* --------------------------------------------- */
/** framework **/
html {-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
body {-webkit-tap-highlight-color:rgba(0,0,0,0.3);}
.clearfix:after,.cmClr:after,.cmWrapper:after,.cmPage:after {content:'';display:block;clear:both;height:0;}
.cmAction {-webkit-touch-callout: none;}

/* --------------------------------------------- */
html {
	background-color: black;
}
body {
	padding-top: 10px;
	min-height:0;
	font: 16px/1.5 Arial, Helvetica, sans-serif;
}
section {
	display: table;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	table-layout: fixed;
	box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	margin: 0 auto;
	margin-bottom: 10px;
	width: 750px;
	color: black;
	background-color: white;
	border-radius: 30px;
}
section h2 {
	display: table-cell;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
	width: 100px;
	padding: 0 20px;
	font-size: 32px;
	color: white;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.75);
}
section div.content {
	display: table-cell;
	padding: 10px 10px 10px 0;
}
section div.content > * {
	padding: 20px;
	background-color: white;
	border-radius: 20px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
footer {
	font-size: 12px;
	text-align: center;
	color: gray;
}
a {
	text-decoration: none;
}
/* --------------------------------------------- */
/** icon **/
div.dice .cmIcon {
	width: 60px;
	height: 60px;
	overflow: visible;
}
ul.cards .cmIcon {
	width: 100px;
	height: 100px;
	margin-top: 14px;
}
.cmIcon i {
	position: absolute;
	border: 0 solid;
}
div.dice b {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: #666;
	box-shadow: 0 1px 0 white, inset 0 2px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 0 white, inset 0 2px 4px rgba(0,0,0,0.5);
}

.cmIcon.dice1 b {
	width: 28px;
	height: 28px;
	border-radius: 14px;
	top: 16px;
	left: 16px;
}

.cmIcon.dice2 b {
	width: 22px;
	height: 22px;
	border-radius: 11px;
}
.cmIcon.dice2 b {left: 19px;}
.cmIcon.dice2 b:first-child {top: 0;}
.cmIcon.dice2 b:last-child {bottom: 0;}

.cmIcon.dice3 b:nth-child(1) {left: 40px; top: 0;}
.cmIcon.dice3 b:nth-child(2) {left: 20px; top: 20px;}
.cmIcon.dice3 b:nth-child(3) {left: 0; top: 40px;}

.cmIcon.dice4 b:nth-child(1) {left: 38px; top: 2px;}
.cmIcon.dice4 b:nth-child(2) {left: 38px; top: 38px;}
.cmIcon.dice4 b:nth-child(3) {left: 2px; top: 38px;}
.cmIcon.dice4 b:nth-child(4) {left: 2px; top: 2px;}

.cmIcon.dice5 b:nth-child(1) {left: 40px; top: 0;}
.cmIcon.dice5 b:nth-child(2) {left: 40px; top: 40px;}
.cmIcon.dice5 b:nth-child(3) {left: 0; top: 40px;}
.cmIcon.dice5 b:nth-child(4) {left: 0; top: 0;}
.cmIcon.dice5 b:nth-child(5) {left: 20px; top: 20px;}

.cmIcon.dice6 b:nth-child(1) {left: 3px; top: -5px;}
.cmIcon.dice6 b:nth-child(2) {left: 3px; top: 20px;}
.cmIcon.dice6 b:nth-child(3) {left: 3px; bottom: -5px;}
.cmIcon.dice6 b:nth-child(4) {right: 3px; top: -5px;}
.cmIcon.dice6 b:nth-child(5) {right: 3px; top: 20px;}
.cmIcon.dice6 b:nth-child(6) {right: 3px; bottom: -5px;}

/** play **/
.cmIcon.play b {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 25px 0 25px 50px;
	border-top-color: transparent;
	border-bottom-color: transparent;
	left: 10px;
	top: 5px;
}
.cmIcon.play i {
	width: 0;
	height: 0;
	border-color: white;
	border-style: solid;
	border-width: 25px 0 25px 50px;
	border-top-color: transparent;
	border-bottom-color: transparent;
	left: 10px;
	top: 6px;
}
/** pause **/
.cmIcon.pause b {
	width: 0;
	height: 50px;
	border-left: 10px solid;
	border-right: 10px solid;
	top: 5px;
	box-shadow: 0 1px 0 white;
	-webkit-box-shadow: 0 1px 0 white;
	border-radius: 2px;
}
.cmIcon.pause b:nth-child(1) {left: 5px;}
.cmIcon.pause b:nth-child(2) {left: 35px;}

/** person **/
.cmIcon.person b {
	width: 0;
	height: 0;
	box-shadow: 0 1px 0 white;
	-webkit-box-shadow: 0 1px 0 white;
}
.cmIcon.person b:nth-child(1) {
	left: 30px;
	top: 5px;
	border: 20px solid;
	border-radius: 20px;
}
.cmIcon.person b:nth-child(2) {
	left: 20px;
	bottom: 5px;
	height: 45px;
	border-left: 30px solid;
	border-right: 30px solid;
	border-radius: 10px 10px 2px 2px;
}

/** object **/
.cmIcon.object b {
	width: 0;
	height: 0;
}
.cmIcon.object b:nth-child(5) {
	left: 10px;
	bottom: 10px;
	border: 30px solid;
	box-shadow: 0 1px 0 white;
	-webkit-box-shadow: 0 1px 0 white;
}
.cmIcon.object b:nth-child(1),
.cmIcon.object b:nth-child(2),
.cmIcon.object b:nth-child(3),
.cmIcon.object b:nth-child(4) {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.cmIcon.object b:nth-child(1),
.cmIcon.object b:nth-child(2) {
	left: 22px;
	top: 6px;
	width: 60px;
	height: 24px;
	border-width: 5px 3px 0 7px;
	-moz-transform: skew(-45deg);
	-webkit-transform: skew(-45deg);
}
.cmIcon.object b:nth-child(1) {
	top: 7px;
	color: white;
}
.cmIcon.object b:nth-child(3),
.cmIcon.object b:nth-child(4) {
	right: 6px;
	top: 18px;
	width: 24px;
	height: 60px;
	border-width: 3px 5px 7px 0;
	-moz-transform: skew(0, -45deg);
	-webkit-transform: skew(0, -45deg);
}
.cmIcon.object b:nth-child(3) {
	top: 19px;
	color: white;
}

/** motion **/
.cmIcon.motion b {
	width: 0;
	height: 0;
	border-type: solid;
	border-width: 0 5px 15px 75px;
	border-color: transparent;
	border-bottom-color: inherit;
	box-shadow: 0 1px 0 white;
	-webkit-box-shadow: 0 1px 0 white;
}
.cmIcon.motion b:nth-child(1) {left: 20px; top: 15px;}
.cmIcon.motion b:nth-child(2) {left: 10px; top: 40px;}
.cmIcon.motion b:nth-child(3) {left: 0px; top: 65px;}

/** question **/
.cmIcon.question b {
	width: 0;
	height: 0;
}
.cmIcon.question b:nth-child(3),
.cmIcon.question b:nth-child(1) {  /** arc **/
	left: 22px;
	top: 2px;
	width: 20px;
	height: 20px;
	border-width: 18px;
	border-radius: 40px;
	border-bottom-color: transparent !important;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.cmIcon.question b:nth-child(1) {  /** arc shadow **/
	top: 3px;
	border-color: white;
}

.cmIcon.question b:nth-child(2) {  /** column **/
	left: 40px;
	top: 40px;
	height: 26px;
	border-width: 0 10px;
	border-top-left-radius: 10px;
	box-shadow: 0 1px 0 white;
	-webkit-box-shadow: 0 1px 0 white;
}
.cmIcon.question b:nth-child(4) {  /** dot **/
	left: 36px;
	top: 70px;
	border: 14px solid;
	border-radius: 14px;
	box-shadow: 0 1px 0 white;
	-webkit-box-shadow: 0 1px 0 white;
}


/** infinite **/
.cmIcon.infinite b {
	top: 25px;
	width: 16px;
	height: 16px;
	border-width: 17px;
	border-radius: 40px;
}
.cmIcon.infinite b:nth-child(1),
.cmIcon.infinite b:nth-child(2) {  /** shadow **/
	top: 26px;
	border-color: white;
}
.cmIcon.infinite b:nth-child(1),
.cmIcon.infinite b:nth-child(3) {  /** left **/
	left: 1px;
	border-top-right-radius: 0;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.cmIcon.infinite b:nth-child(2),
.cmIcon.infinite b:nth-child(4) {  /** right **/
	right: 2px;
	border-top-left-radius: 0;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}


/* --------------------------------------------- */
/** card **/
section.card {
	background-color: #06f;
}
section.card h2 {
	font-size: 40px;
}
section.card .amount {
	color: gray;
	font-size: 20px;
}
section.card .inner {
	padding-bottom: 0;
}
section.card li {
	position: relative;
	margin: 0 auto;
	padding-bottom: 20px;
	height: 130px;
	cursor: pointer;
	-webkit-tap-highlight-color:transparent;
}
#man > i, #man > b {color: black; text-shadow: 0 1px 0 rgba(255,255,255,1); background-color: yellow;}
#obj > i, #obj > b {color: black; text-shadow: 0 1px 0 rgba(255,255,255,0.75); background-color: #66f;}
#act > i, #act > b {color: black; text-shadow: 0 1px 0 rgba(255,255,255,0.75); background-color: orange;}
#adj > i, #adj > b {color: black; text-shadow: 0 1px 0 rgba(255,255,255,0.75); background-color: #3c3;}
#all > i, #all > b {color: black; text-shadow: 0 1px 0 rgba(255,255,255,0.75); background-color: #f66;}

section.card li > i,
section.card li > b {
	position: absolute;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	left: 20px;
	width: 540px;
	height: 130px;
	font-size: 80px;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	white-space: nowrap;
	border-radius: 20px;
}
section.card li > i {border: 1px solid rgba(0,0,0,.5); line-height: 128px; z-index: 20;}
section.card li > b {border: 5px solid black; line-height: 120px; z-index: 10;}
section.card li > b {
	box-shadow: 0 5px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}

section.card li .amount {
	position: absolute;
	right: 0;
	top: 50px;
}
section.card li .amount.error {
	font-weight: 700;
	color: red;
}


/** switch **/
section.card li.covered > i {
	display: block;
}
section.card li.covered > b {
	display: none;
}
section.card li.opened > i {
	display: none;
}
section.card li.opened > b {
	display: block;
}
section.card li.empty {
	opacity: 0.2;
	pointer-events: none;
}

/** info **/
section.card div.info {
	position: relative;
}
section.card div.info .amount {
	position: absolute;
	z-index: 10;
	left: -100px;
	bottom: 60px;
	width: 60px;
	text-align: center;
}
section.card div.info a {
	position: absolute;
	z-index: 10;
	left: -90px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background-color: rgba(255,255,255,.5);
}
section.card div.info a i {
	margin-top: 5px;
	color: white;
}



/* --------------------------------------------- */
/** dice **/
section.dice {
	background-color: #c33;
	line-height: 1.2;
}
section.dice .inner {
	padding-bottom: 30px;
}
section.dice .dice {
	margin: 0 auto;
	padding: 15px;
	width: 60px;
	height: 60px;
	border: 1px solid #999;
	border-radius: 20px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
	background-color: #ddd;
	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.85), rgba(255,255,255,0));
	background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(255,255,255,0.85)), to(rgba(255,255,255,0)));
}

/** number **/
section.dice .dice li {
	position: absolute;
	visibility: hidden;
}
section.dice .dice .dice1 li.dice1,
section.dice .dice .dice2 li.dice2,
section.dice .dice .dice3 li.dice3,
section.dice .dice .dice4 li.dice4,
section.dice .dice .dice5 li.dice5,
section.dice .dice .dice6 li.dice6 {
	visibility: visible;
}

/* --------------------------------------------- */
/** debug **/
body > div.act {
	display: none;
	position: absolute;
	z-index: 999;
	top: 0;
	left: 0;
}
body > div.act a {
	display: block;
	padding: 50px 0;
	width: 150px;
	text-align: center;
	background: yellow;
	box-shadow: 0 5px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}


/** The End **/
/* --------------------------------------------- */
